<script setup>
import { ref } from "vue";
import { useUserStore } from "@/stores";
import { putUserEdit } from "@/api/user";

// 获取表单的dom
const ruleFormRef = ref(null);

const userData = ref({
  id: 1,
  username: "admin",
  name: "昵称",
  email: "邮箱",
});

const userStore = useUserStore();
userData.value = userStore.userInfo;

const rules = {
  name: [{ required: true, message: "请输入昵称", trigger: "blur" }],
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    {
      type: "email",
      message: "请输入正确的邮箱地址",
      trigger: ["blur", "change"],
    },
  ],
};
// 提交修改
const onSubmit = async () => {
  //表单预校验
  ruleFormRef.value.validate();
  //console.log(userData.value);
  const res = await putUserEdit(userData.value);
  ElMessage({
    message: "修改成功",
    type: "success",
    plain: true,
  });
  // 将修改后的数据保存到store中
  userStore.getUserInfo();
};
</script>

<template>
  <Card title="基本资料">
    <!-- 默认插槽--内容 -->
    <el-form
      ref="ruleFormRef"
      style="max-width: 400px"
      :model="userData"
      :rules="rules"
      label-width="80px"
    >
      <el-form-item label="用户名" prop="name">
        <el-input v-model="userData.username" disabled />
      </el-form-item>
      <el-form-item label="昵称" prop="name">
        <el-input v-model="userData.name" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="userData.email" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交修改</el-button>
      </el-form-item>
    </el-form>
  </Card>
</template>

<style lang="scss" scoped></style>
